<template>
	<div class="handler-event-label">
		<el-form-item :label="lebel" label-width="145px">
			<span slot="label" @click="showInput" :class="!isSetting ? 'active-label' : 'text-wraper'">{{ label }} <i v-show="!isSetting" class="add-icon"> + </i> </span>
			<span class="del-icon" v-if="isSetting" @click="hideInput"></span>
			<p class="setting" v-if="isSetting">
				<el-button @click="settingClick">设置</el-button>
			</p>
		</el-form-item>
	</div>
</template>

<script>
export default {
	props: {
		label: {
			type: String,
			default: () => '',
			required: true
		},
		isSetting: {
			type: Boolean,
			default: () => false
		}
	},
	data() {
		return {};
	},
	methods: {
		settingClick() {
			this.$emit('settingClick');
		},
		showInput() {
			this.$emit('setSetting', true);
		},
		hideInput() {
			this.$emit('setSetting', false);
		}
	}
};
</script>

<style></style>
